<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <script type="text/javascript" src="../js/tools/jquery-1.6.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("img").mouseover(function(){
                var $img = $(this);
                var w = $img.width()+"px";
                var h = $img.height()+"px";
                var ot = $img.offset().top;
                var ol = $img.offset().left;
                if($("#mask").css("display")=="none")
                    $("#mask").css({"width":w,"height":h,"top":ot,"left":ol,"display":"block"})
            }).mouseout(function(){
                $("#mask").css("display","none");
            })
        })
    </script>
</head>
<body>
<div id="mask" style="position:absolute;z-index:99;filter:alpha(opacity=50);opacity:0.5;background:red;display:none;"></div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="test.png" />
</body>
</html>